<template>
    <!-- <div class="recommend">
        <div class="recommend-item" v-for="item in regoods.slice(0,4)" :key="item.id">
            <a href="">
                <img v-lazy="item.cover_url" alt="">
                <div>{{item.title}}</div>
            </a>
        </div>


    </div> -->
    <van-divider  v-if="regoods.length"
    :style="{ color: '#576b95', borderColor: '#576b95', padding: '0 22px' }"
    >
    <span style="font-size: 20px;">推荐商品</span>
    </van-divider>
    
    <van-grid :gutter="8" :column-num="3">
      <van-grid-item v-for="item in regoods.slice(0,6)" :key="item.id" :icon="item.cover_url" :text="item.title" @click="itemClick(item.id)"/>
    </van-grid>
</template>

<script>
import {inject} from 'vue';
import {useRouter} from 'vue-router';
export default {
    name:"Recommend",
    setup() {
        const router = useRouter();
        let regoods = inject('regoods');
        let itemClick=(id)=>{
        router.push({path:"/detail",query:{id}});
        }
        return {
           regoods,
           itemClick
       }
    },
}
</script>

<style scoped lang="scss">
.recommend{
    display: flex;
    width: 100%;
    text-align: center;
    padding: 15px 0 30px;   //上右下左
    border-bottom:8px solid #eee;  //分割线
}
.recommend-item{
    flex:1;
    img {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
}
.van-grid-item__content {
   padding:6px  !important;
}
</style>